<%--
  Created by IntelliJ IDEA.
  User: Lenovo
  Date: 2021/12/28
  Time: 23:18
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri ="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
    <title>闲优购</title>
    <link rel="icon" href="img/weblogo.png" >
    <link rel="stylesheet" type="text/css" href="bootstrap-5.1.3-dist/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
    <link rel="stylesheet" type="text/css" href="css/ycc.css"/>
    <script type="text/javascript" src="js/jquery-3.6.0-min.js"></script>
    <script type="text/javascript" src="bootstrap-5.1.3-dist/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.js"></script>
    <script type="text/javascript" src="js/card_user_buy_record.js"></script>
</head>
<body>
<div>
    <h5>当前位置:站点管理>>用户行为统计</h5>
    <div id="e1" style="width: 45%;height: 500px; float:left"></div>
    <div id="e2" style="width: 45%;height: 500px; float:left"></div>
</div>

</body>
<script>
    var myChart1 = echarts.init(document.getElementById('e1'));
    var myChart2 = echarts.init(document.getElementById('e2'));

    var userAction = []
    var userAction_key = []
    var userAction_value = []

    var commodity = []
    var commodity_key = []
    var commodity_value = []
    $.ajax({
        url:'/etReadUserAction',
        type: 'GET',
        dataType: 'json',
        async: false,
        error: function(){
            alert('AJAX请求错误')
        },
        success: function(res){
            for(var x in res['user']) {
                userAction_key.push(x)
                userAction_value.push(res['user'][x])
                userAction.push({name: x, value: res['user'][x]})
            }
            for(var x in res['commodity']) {
                commodity_value.push(x)
                commodity_key.push(res['commodity'][x])
                commodity.push({name: x, value: res['commodity'][x]})
            }
        }

    })
    option1 = {
        xAxis: {
            type: 'category',
            data: userAction_key,
            name: '用户名称'
        },
        yAxis: {
            type: 'value',
            name: '浏览数',
        },
        series: [
            {
                data: userAction_value,
                type: 'line'
            }
        ]
    };
    option2 = {
        title:{
            text: '不同商品类型用户访问量统计',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '5%',
            left: 'center'
        },
        series: [
            {
                name: '占比',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: '40',
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: commodity
            }
        ]
    };
    myChart1.setOption(option1)
    myChart2.setOption(option2)
</script>
</html>
